<template>
    <div>
      <el-dialog title="编辑角色" :visible.sync="authResource.show">
        <el-tree
          :data="tree.data"
          show-checkbox
          default-expand-all
          :check-strictly=tree.checkStrictly
          node-key="id"
          ref="tree"
          highlight-current
          :props="tree.props"
        v-loading="tree.loading">
        </el-tree>
        <div slot="footer" class="dialog-footer">
          <el-button @click="authResource.show = false">取 消</el-button>
          <el-button type="primary" @click="sumbitForm">确 定</el-button>
          <el-button @click="resetForm('roleAddForm')">重置</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>

  import {deptResourceList,getRoleResources} from "@/api/resource/resource";
  import {authResources} from '@/api/role/role'
    export default {
        name: "authResource",
      props:["authResource"],
      data() {
        return {
          tree:{
            data:[],
            props:{
              children: 'children',
              label: 'name'
            },
            checkStrictly:false,
            loading:true
          },
        };
      },
      methods: {
        getCheckedNodes() {
          console.log(this.$refs.tree.getCheckedNodes());
        },
        getCheckedKeys() {
          console.log(this.$refs.tree.getCheckedKeys());
        },
        setCheckedNodes() {
          this.$refs.tree.setCheckedNodes([{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 9,
            label: '三级 1-1-1'
          }]);
        },
        setCheckedKeys() {
          this.$refs.tree.setCheckedKeys([3]);
        },
        resetChecked() {
          this.$refs.tree.setCheckedKeys([]);
        },
        resourceTree(data,parentId){
          let tree=[];
          data.forEach((item,index)=>{
            if(item.pid==parentId){
              let children=this.resourceTree(data,item.id)
              item.children=children;
              tree.push(item);
            }
          })
          return tree;
        },
        initArray(list,array){
          list.forEach((item,index)=>{
            if(item.child.length==0){
                  array.push(item.id);
            }else {
                this.initArray(item.child,array)
            }
          })
        },
        sumbitForm(){
          let resourceIds=this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()).toString();
          console.log(resourceIds)
          authResources({roleId:this.authResource.id,resourceIds:resourceIds}).then(response=>{
            this.authResource.show=false;
            this.$parent.onSearch();
            // location.reload()
          })


        }
      },
      watch:{
        'authResource.id':{
          handler(newValue, oldValue){
            this.tree.loading=true
            if(oldValue==null||this.tree.data.length==0){
              deptResourceList({status:1}).then(response=>{
                let data=response.data.data;
                 this.tree.data=this.resourceTree(data,0)
                this.tree.loading=false;
              })
            }
            getRoleResources({roleId:newValue}).then(response=>{
              let data=response.data.data;
              let array=[]
              this.initArray(data,array)
              // console.log(data)
              // console.log(array)
              this.$refs.tree.setCheckedKeys(array);
              this.tree.loading=false;
            })
          }
        },

      },
      mounted(){

          // alert(111)

      }
    }
</script>

<style scoped>

</style>
